<template>
    <div class="common-charts" :style="{'--chartHeight':chartHeight}">
        <div :id="idName"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts/core';
    import {
        TitleComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        DataZoomComponent
    } from 'echarts/components';
    import {
        CustomChart,
        BarChart,
        LineChart
    } from 'echarts/charts';
    import {
        CanvasRenderer
    } from 'echarts/renderers';

    echarts.use(
        [TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer, DataZoomComponent,
            CustomChart,BarChart, LineChart
        ]
    );
    export default {
        props: {
            idName: {
                type: String,
                default: "",
            },
            chartHeight:{
                type: String,
                default:""
            }
        },
        data() {
            return {
                myChart: null,
            };
        },
        mounted() {
            let chartDom = document.getElementById(this.idName);
            this.myChart = echarts.init(chartDom);
        },
        methods: {
            show(option) {
                option && this.myChart.setOption(option);
                window.addEventListener('resize',()=>{ //防止监听覆盖
                    this.myChart.resize()
                },false)
            },
        },
    };
</script>

<style lang="less" scoped>
    .common-charts {
        width: 100%;
        height: var(--chartHeight);
        padding-top: 10px;

        >div {
            width: 100%;
            height: 100%;
        }
    }
</style>